<template>
	<view class="container">
		<view class="cut"></view>
		<view class="section-header">
			<view class="valid_time" v-if="orderType == 1">
				<text>支付剩余时间</text>{{countdown_time}}
			</view>
			<view class="price">
				￥ <text>{{money}}</text>
			</view>
			<view class="confirm">
				您购买的<text> {{item.name}}</text>
			</view>
		</view>
		<view class="cut"></view>
		<view class="cellBox" v-if="orderType == 0">
			<view class="cell">
				<view class="left">
					<text>余额抵扣</text>
				</view>
				<evan-switch :size="18" active-color="#FBC866" :disabled="disabled" v-model="yueChecked"></evan-switch>
			</view>
			<view class="cell" style="margin-top: 20rpx;">
				<view class="left">
					<text>余额</text>
					<text>共￥{{now_money}}</text>
					<text v-if="yueChecked">，使用￥{{yueDeduction}}，抵￥{{yueDeduction}}</text>
				</view>
				<view v-if="yueChecked&&now_money != 0" class="right" @tap="!disabled&&yueChange()">
					<text class="change">修改</text>
				</view>
			</view>
		</view>
		<uni-popup ref="yueChange" type="center">
			<view class="box">
				<image @tap="close" src="../../../static/images/center/close.png" mode=""></image>
				<view class="title">余额抵扣</view>
				<view class="content">
					<view class="label">
						<text>拥有余额</text>
						<text>{{now_money}}</text>
					</view>
					<view class="inputBox">
						<text>使用余额</text>
						<text>元</text>
						<input type="digit" v-model="yueDeduction" @input="yueChanged" />
					</view>
					<view @tap="close" class="boxbtn">确认</view>
				</view>
			</view>
		</uni-popup>
		<view class="orderInfo" v-if="orderType == 1">
			<view class="cell">
				<text class="a">订单编号：</text>
				<text class="b">{{orderInfo.order_id||''}}</text>
			</view>
			<view class="cell">
				<text class="a">下单时间：</text>
				<text class="b">{{orderInfo.time||''}}</text>
			</view>
			<view class="cell">
				<text class="a">余额抵扣：</text>
				<text class="b">￥{{orderInfo.use_now_money||''}}</text>
			</view>
			<view class="cell">
				<text class="a">现金支付：</text>
				<text class="b">￥{{orderInfo.pay_price||''}}</text>
			</view>
			<view class="cell">
				<text class="a">订单总价：</text>
				<text class="b">￥{{orderInfo.total_price||''}}</text>
			</view>
		</view>
		<uni-popup ref="payConfirm" type="bottom">
			<view class="payConfirm">
				<image class="close" @tap="confirmClose" src="../../../static/images/center/close.png" mode=""></image>
				<view class="tit">支付确认</view>
				<view class="money" v-if="orderType == 0">{{actuallyPaid}}</view>
				<view class="money" v-else>{{orderInfo.pay_price}}</view>
				<view class="cell">
					<view class="a" v-if="orderType == 0">余额抵扣 ￥ {{yueDeduction}}</view>
					<view class="a" v-else>余额抵扣 ￥ {{orderInfo.use_now_money}}</view>
					<!-- #ifdef APP-PLUS -->
					<!-- app支付选择 -->
					<view class="yt-list" v-if="actuallyPaid != 0">
						<view class="pay-box">
							<block v-for="(item,index) in providerList" :key="index">
								<view class="way" @tap="chooseWay(index)">
									<view class="left">
										<image :src="item.icon" mode=""></image>
										<text>{{item.name}}</text>
									</view>
									<view :class="index == indexWay?'active':''" class="right">

									</view>
								</view>
							</block>
						</view>
					</view>
					<!-- #endif -->
				</view>
				<view class="btn confirmBtn" @tap="confirmPay">确认支付</view>
			</view>
		</uni-popup>
		<view class="cut"></view>
		<view class="btn" @tap="confirmShow">立即支付</view>
		<view class="btn cancel" @tap="cancelOrder" v-if="orderType == 1">取消订单</view>
		<!-- 抵扣全部金额输入平台操作密码 -->
		<passkeyborad :show="keyboradShow" @close="keyboradClose" @finish="finished"></passkeyborad>
	</view>
</template>

<script>
	import evanSwitch from "@/components/evan-switch/evan-switch.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import utils from "@/common/utils.js"
	import util from "@/utils/util.js"
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	import wechat from '@/common/wechat.js'
	import {
		serviceCheckOrder,
		checkPassword,
		serviceAddOrder,
		servicePay,
		serviceCancelOrder
	} from "@/api/user.js"
	export default {
		components: {
			evanSwitch,
			uniPopup,
			passkeyborad
		},
		data() {
			return {
				providerList: [],
				indexWay: 0,
				payType: 1,
				provider: "wxpay",
				orderType: null,
				orderInfo: {
					time: '',
					valid_time: ''
				},
				info: {}, //推荐人信息
				countdown_time: "00:00:00",
				money: null, //需支付金额
				item: {}, // 提货卡信息
				now_money: uni.getStorageSync("userInfo").now_money, //用户余额
				disabled: false, //抵扣开关可切换状态
				yueChecked: false, //抵扣开关状态
				yueDeduction: 0, //抵扣金额
				actuallyPaid: 0, //抵扣后需支付金额
				keyboradShow: false, //操作密码键盘

			}
		},
		onLoad(option) {
			if (uni.getStorageSync("available_alipay") == 0) {
				this.providerList = [{
					name: "微信支付",
					icon: "/static/images/public/weixin.png",
					payType: 1,
					provider: "wxpay"
				}]
			} else {
				this.providerList = [{
						name: "微信支付",
						icon: "/static/images/public/weixin.png",
						payType: 1,
						provider: "wxpay"
					},
					{
						name: "支付宝支付",
						icon: "/static/images/public/alipay.png",
						payType: 2,
						provider: "alipay"
					}
				]
			}
			this.item = JSON.parse(decodeURIComponent(option.item))
			if (option.info) {
				this.info = JSON.parse(decodeURIComponent(option.info))
			}
			var index = this.item.money.lastIndexOf("：");
			this.money = this.item.money.substring(index + 1, this.item.money.length);
			this.actuallyPaid = this.money
			serviceCheckOrder({
				card_id: this.item.id
			}).then(res => {
				if (res.data.is_exist == 1) {
					this.orderType = 1
					this.orderInfo = res.data
					this.orderInfo.valid_time = this.orderInfo.add_time + this.orderInfo.cancel_order_time + 1
					setInterval(() => {
						this.countdown_time = utils.timeCount(this.orderInfo.valid_time)
					}, 1000);
					this.orderInfo.time = util.formatDate(new Date(this.orderInfo.add_time * 1000));
				} else {
					this.orderType = 0
				}
			})
		},
		watch: {
			yueChecked: {
				deep: true,
				handler(val, oldval) {
					this.change();
				}
			}
		},
		methods: {
			//切换支付方式
			chooseWay(index) {
				this.indexWay = index
				this.payType = this.providerList[index].payType
				this.provider = this.providerList[index].provider
			},
			// 切换抵扣开关
			change() {
				if (this.now_money != 0) {
					this.disabled = false
				} else {
					this.disabled = true
				}
				let payable = Number(this.money)
				let now_money = Number(this.now_money)
				if (this.yueChecked) {
					if (payable >= now_money) {
						this.yueDeduction = now_money
						this.actuallyPaid = (payable - this.yueDeduction).toFixed(2)
					} else {
						this.yueDeduction = payable
						this.actuallyPaid = 0
					}
				} else {
					this.yueDeduction = 0
					this.actuallyPaid = payable
				}
			},
			// 修改抵扣金额
			yueChanged() {
				let payable = Number(this.money)
				let now_money = Number(this.now_money)
				this.$nextTick(function() {
					this.yueDeduction = utils.verifyNum(this.yueDeduction)
					if (now_money > payable) {
						if (Number(this.yueDeduction) > payable) {
							uni.showToast({
								icon: "none",
								title: "不能超过需支付金额"
							})
							this.yueDeduction = payable
							this.actuallyPaid = 0
						} else {
							this.actuallyPaid = (payable - this.yueDeduction).toFixed(2)
						}
					} else {
						if (Number(this.yueDeduction) > now_money) {
							uni.showToast({
								icon: "none",
								title: "不能超过余额"
							})
							this.yueDeduction = now_money
							this.actuallyPaid = (payable - this.yueDeduction).toFixed(2)
						} else {
							this.actuallyPaid = (payable - this.yueDeduction).toFixed(2)
						}
					}

				})
			},
			//打开修改抵扣面板
			yueChange() {
				this.$refs.yueChange.open()
			},
			//关闭修改抵扣面板
			close() {
				this.$refs.yueChange.close()
			},
			//打开支付确认面板
			confirmShow() {
				this.$refs.payConfirm.open()
			},
			//关闭支付确认面板
			confirmClose() {
				this.$refs.payConfirm.close()
			},
			// 确认支付判断是否0元支付
			confirmPay() {
				if (this.orderType == 0) {
					if (this.actuallyPaid == 0) {
						if (!uni.getStorageSync("userInfo").withdraw_pass) {
							uni.showModal({
								content: "0元支付需设置操作密码",
								confirmText: "去设置",
								cancelText: "取消",
								confirmColor: "#FBC866",
								success(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: "/pages/center/accountSet/payPassword/payPassword?backurl=true"
										})
									} else if (res.cancel) {}

								}
							})
							return
						}
						this.keyboradShow = true
						this.confirmClose()
					} else {
						this.submit()
					}
				} else {
					uni.showLoading({
						mask:true
					})
					servicePay({
						order_id: this.orderInfo.order_id,
						//#ifdef MP-WEIXIN
						source: 1,
						//#endif
						//#ifdef APP-PLUS
						source: 2,
						//#endif
						//#ifdef H5
						source: 3,
						//#endif
						pay_type: this.payType,
					}).then(res => {
						uni.hideLoading()
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timestamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							complete: function(re) {
								uni.navigateBack({

								})
							}
						});
						// #endif
						// #ifdef APP-PLUS
						uni.requestPayment({
							provider: this.provider,
							orderInfo: res.data,
							complete: function(re) {
								uni.navigateBack({

								})
							}
						});
						// #endif
						//#ifdef H5
						// h5支付
						let url = "/pages/center/vip/vipRights"
						wechat.pay(res.data, url, false)
						//#endif
					})
				}
			},
			//操作密码验证
			finished(password) {
				uni.showLoading({
					mask:true
				})
				checkPassword({
					password: password
				}, this.keyboradClose()).then(res => {
					this.submit()
				})
			},
			//关闭操作密码键盘
			keyboradClose() {
				this.keyboradShow = false
			},
			submit() {
				uni.showLoading({
					mask:true
				})
				serviceAddOrder({
					id: this.item.id,
					//#ifdef MP-WEIXIN
					source: 1,
					//#endif
					//#ifdef APP-PLUS
					source: 2,
					//#endif
					//#ifdef H5
					source: 3,
					//#endif
					pay_type: this.payType,
					use_balance: this.yueDeduction,
					rec_code: this.info.service_code
				}).then(res => {
					uni.hideLoading()
					this.confirmClose()
					if (res.data.paid == 1) {
						uni.showToast({
							title: "支付成功"
						})
						setTimeout(function() {
							uni.navigateBack({

							})
						}, 300);
					} else if (res.data.paid == 0) {
						servicePay({
							order_id: res.data.order_id,
							//#ifdef MP-WEIXIN
							source: 1,
							//#endif
							//#ifdef APP-PLUS
							source: 2,
							//#endif
							//#ifdef H5
							source: 3,
							//#endif
							pay_type: this.payType,
						}).then(res => {
							// #ifdef MP-WEIXIN
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.timestamp,
								nonceStr: res.data.nonceStr,
								package: res.data.package,
								signType: res.data.signType,
								paySign: res.data.paySign,
								complete: function(re) {
									uni.navigateBack({

									})
								}
							});
							// #endif
							// #ifdef APP-PLUS
							uni.requestPayment({
								provider: this.provider,
								orderInfo: res.data,
								complete: function(re) {
									uni.navigateBack({

									})
								}
							});
							// #endif
							//#ifdef H5
							// h5支付
							let url = "/pages/center/vip/vipRights"
							wechat.pay(res.data, url, true)
							//#endif
						})
					}
				})
			},
			cancelOrder() {
				uni.showLoading({
					mask:true
				})
				serviceCancelOrder({
					order_id: this.orderInfo.order_id
				}).then(res => {
					uni.showToast({
						icon: "none",
						title: res.msg
					})
					setTimeout(function() {
						uni.navigateBack({

						})
					}, 300)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 60rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 60rpx);

		.cut {
			width: 750rpx;
			height: 24rpx;
			background: rgba(250, 250, 250, 1);
		}

		.section-header {
			background-color: #fff;
			text-align: center;
			padding: 70rpx 0;

			.valid_time {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;

				text {
					font-size: 28rpx;
					margin-right: 10rpx;
				}
			}

			.price {
				font-size: 40rpx;
				color: #333;
				margin: 35rpx 0;
				font-weight: bold;

				text {
					font-size: 72rpx;
				}
			}

			.confirm {
				font-size: 34rpx;

				text {
					font-weight: bold;
					margin-left: 20rpx;
				}
			}
		}

		.cellBox {
			padding: 30rpx;

			.cell {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 66rpx;

				.left {
					text {
						font-size: 22rpx;
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
					}

					image {
						width: 20rpx;
						height: 15rpx;
						margin: 0 4rpx;
					}

					text:nth-of-type(1) {
						font-size: 28rpx;
						font-weight: normal;
						margin-right: 10rpx;
					}
				}

				.right {
					image {
						width: 33rpx;
						height: 24rpx;
						margin-right: 6rpx;
					}

					.num {
						font-size: 26rpx;
						font-weight: bold;
						color: $theme-color;
					}

					.change {
						display: block;
						font-size: 24rpx;
						color: rgba(51, 51, 51, 1);
						width: 90rpx;
						height: 44rpx;
						line-height: 44rpx;
						border-radius: 22rpx;
						text-align: center;
						background-color: #e5e5e5;
					}
				}

				.switch {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		.orderInfo {
			padding: 30rpx;

			.cell {
				display: flex;
				align-items: center;
				color: #666;
				font-size: 28rpx;
				line-height: 80rpx;

				.a {
					width: 160rpx;
				}

				.b {
					flex: 1;
				}
			}
		}

		.box {
			background-color: #fff;
			position: relative;
			width: 600rpx;
			padding: 36rpx;
			box-sizing: border-box;
			border-radius: 10rpx;

			image {
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				width: 26rpx;
				height: 26rpx;
				padding: 30rpx;
			}

			.title {
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
			}

			.content {
				.label {
					display: flex;
					justify-content: center;
					font-size: 28rpx;
					color: #333;
					margin-top: 46rpx;
					align-items: center;

					text:nth-of-type(2) {
						margin-left: 8rpx;
						font-weight: bold;
					}
				}

				.inputBox {
					position: relative;
					height: 114rpx;
					line-height: 114rpx;
					border-bottom: 1rpx solid #eee;

					text:nth-of-type(1) {
						font-size: 28rpx;
						position: absolute;
						top: 0;
						left: 0;
					}

					text:nth-of-type(2) {
						font-size: 28rpx;
						position: absolute;
						top: 0;
						right: 0;
					}

					input {
						height: 114rpx;
						text-align: right;
						padding-right: 58rpx;
						font-size: 56rpx;
					}
				}

				.boxbtn {
					margin: 40rpx 0 0;
					width: 528rpx;
					height: 80rpx;
					background: #FBC866;
					border-radius: 40rpx;
					color: #fff;
					line-height: 80rpx;
					text-align: center;
				}
			}

		}

		.payConfirm {
			position: relative;
			width: 750rpx;
			height: 80vh;
			padding: 50rpx 75rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 30rpx 30rpx 0px 0px;
			text-align: center;
			color: rgba(51, 51, 51, 1);

			.close {
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				width: 26rpx;
				height: 26rpx;
				padding: 30rpx;
			}

			.tit {
				font-size: 36rpx;
				font-weight: 500;
			}

			.money {
				margin: 120rpx 0 100rpx;
				font-size: 72rpx;
				font-weight: bold;

				&:before {
					content: '￥';
					font-size: 40rpx;
					font-weight: normal;
				}
			}

			.cell {
				font-size: 28rpx;

				.a {
					display: flex;
					height: 100rpx;
					justify-content: space-between;
					align-items: center;
				}

				.yt-list {
					margin-top: 16rpx;
					background: #fff;

					.pay-box {

						.way {
							padding: 10rpx 0 10rpx;
							line-height: 70rpx;
							font-size: 26rpx;
							width: 100%;
							box-sizing: border-box;
							border-bottom: 1rpx solid #f5f5f5;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.left {
								display: flex;
								align-items: center;

								image {
									width: 50rpx;
									height: 50rpx;
									margin-right: 10rpx;
								}
							}

							.right {
								width: 32rpx;
								height: 32rpx;
								border-radius: 50%;
								box-sizing: border-box;
								border: 6rpx solid #fff;
								box-shadow: 0 0 0 4rpx #f5f5f5;
							}

							.active {
								background-color: rgba(251, 200, 102, 1);
								box-shadow: 0 0 0 2rpx rgba(251, 200, 102, 1);
							}
						}
					}
				}
			}

			.confirmBtn {
				position: absolute;
			}
		}

		.btn {
			margin: 70rpx auto 0;
			width: 600rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background-color: #FBC866;
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 80rpx;
			text-align: center;
		}

		.cancel {
			box-sizing: border-box;
			border: 1rpx solid #ddd;
			color: #666;
			background: #fff;
			margin: 30rpx auto 0;
		}
	}
</style>
